<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Gallery with View Transition with VT Classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./style.css">

</head>

<body>
<fieldset id="gallery" class="hub">
    <div>
        <input type="radio" id="image-1" name="gallery" value="image-1" checked>
        <img src="https://assets.codepen.io/2585/image_fx_a_black_wolf_in_armor_wrecking_a_steampunk_ci.jpg" alt=""/>
        <label for="image-1">Cyber Wolf</label>
    </div>

    <div>
        <input type="radio" id="image-2" name="gallery" value="image-2">
        <img src="https://assets.codepen.io/2585/image_fx_cyberpunk_city_scene_with_neon_streaks_of_lig+%283%29.jpg"
             alt=""/>
        <label for="image-2">Flying cars</label>
    </div>

    <div>
        <input type="radio" id="image-3" name="gallery" value="image-3">
        <img src="https://assets.codepen.io/2585/image_fx_cyberpunk_city_scene_with_neon_streaks_of_lig+%282%29.jpg"
             alt=""/>
        <label for="image-3">Flying cars 2</label>
    </div>

    <div>
        <input type="radio" id="image-4" name="gallery" value="image-4">
        <img src="https://assets.codepen.io/2585/image_fx_cyberpunk_city_scene_with_neon_streaks_of_lig+%281%29.jpg"
             alt=""/>
        <label for="image-4">Flying cars 3</label>
    </div>

    <div>
        <input type="radio" id="image-5" name="gallery" value="image-5">
        <img src="https://assets.codepen.io/2585/image_fx_cyberpunk_city_scene_with_neon_streaks_of_lig+%284%29.jpg"
             alt=""/>
        <label for="image-5">Cyber T-Rex</label>
    </div>

    <div>
        <input type="radio" id="image-6" name="gallery" value="image-6">
        <img src="https://assets.codepen.io/2585/image_fx_a_raptor_in_armor_wrecking_a_cyberbunk_city_w.jpg" alt=""/>
        <label for="image-6">Cyber Raptor</label>
    </div>

    <div>
        <input type="radio" id="image-7" name="gallery" value="image-7">
        <img src="https://assets.codepen.io/2585/image_fx_cyberpunk_city_scene_with_neon_streaks_of_lig.jpg" alt=""/>
        <label for="image-7">Cyber freeway</label>
    </div>
</fieldset>
<script src="./script.js"></script>

</body>

</html>
